<template>
  <div class="filter">
    <div class="add-region">
      <div v-for="(item, index) in addCourseList" :key="index" class="one-list">
        <div class="filter-item">
          <label for="">课程名称：</label>
          <Select
            v-model="item.courseId"
            style="width: 100px"
            @on-change="courseTypeChange($event, item)"
          >
            <Option
              v-for="(item, coursePay) in courseTypeList"
              :value="item.courseId"
              :key="item.courseId"
              :tag="coursePay"
              >{{ item.courseName }}</Option
            >
          </Select>
        </div>
        <div class="filter-item">
          <label for="">教练：</label>
          <Select v-model="item.coachId" style="width: 100px">
            <Option
              v-for="item in coachList"
              :value="item.coachId"
              :key="item.coachId"
              :tag="item.coachId"
              >{{ item.coachName }}</Option
            >
          </Select>
        </div>
        <div class="filter-item">
          <label for="">课程数量：</label>
          <Input
            v-model="item.courseNum"
            placeholder="数量"
            style="width: 80px"
            @on-change="jisuan($event, item)"
          />
        </div>
        <div class="filter-item">
          <label for="">课程单价：</label>
          <Input
            v-model="item.coursePrice"
            placeholder="单价"
            style="width: 80px"
            @on-change="jisuan($event, item)"
          />
        </div>
        <div class="filter-item">
          <label for="">课程价格：</label>
          <Input
            v-model="item.courseSum"
            placeholder="总价"
            style="width: 80px"
          />
        </div>
        <div class="filter-item">
          <Button
            shape="circle"
            icon="md-add"
            type="info"
            ghost
            size="small"
            style="margin-left: 10px"
            @click="addItem()"
          ></Button>
          <Button
            v-if="index != 0 && index == addCourseList.length - 1"
            shape="circle"
            icon="md-close"
            type="info"
            ghost
            size="small"
            style="margin-left: 10px"
            @click="deletePlanItem(index)"
          ></Button>
        </div>
      </div>
    </div>
    <div class="add-btn">
      <Button type="error" @click="addVipCourse">添加课程</Button>
    </div>
    <Divider />
    <div class="filter-item">
      <label for="">课程名称：</label>
      <Select v-model="courseId" clearable style="width: 100px">
        <Option
          v-for="item in courseTypeList"
          :value="item.courseId"
          :key="item.courseId"
          >{{ item.courseName }}</Option
        >
      </Select>
    </div>
    <div class="filter-item">
      <label for="">教练：</label>
      <Select v-model="coachId" clearable style="width: 100px">
        <Option
          v-for="item in coachList"
          :value="item.coachId"
          :key="item.coachId"
          >{{ item.coachName }}</Option
        >
      </Select>
    </div>
    <div class="filter-item">
      <Button type="error" @click="getAllCourseByVipId">查询</Button>
    </div>
    <div class="filter">
      <div class="table">
        <Table
          ref="table"
          :columns="vipCourseColumns"
          :data="vipCourseData"
          border
          height="600"
        ></Table>
      </div>
    </div>
    <Modal v-model="updateCoachModal" width="300" :title="updateTitle">
      <Select
        v-model="updateCoachId"
        style="width: 100px"
        @on-change="coachChange"
      >
        <Option
          v-for="item in coachList"
          :value="item.coachId"
          :key="item.coachId"
          >{{ item.coachName }}</Option
        >
      </Select>
      <div slot="footer">
        <Button type="success" @click="changeCoach">转教练</Button>
        <Button @click="cloaseUpdateModal">取消</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      vipCourseData: [],
      courseId: 0,
      coachId: 0,
      vipId: 0,
      addCourseList: [
        {
          courseId: 0,
          coursePrice: 0,
          courseName: "",
          coachId: 0,
          coachName: "",
          courseNum: 0,
          courseSum: 0,
        },
      ],
      vipCourseColumns: [
        {
          type: "index",
          title: "序号",
          width: 100,
        },
        {
          title: "课名",
          key: "courseName",
          align: "center",
          width: 150,
        },
        {
          title: "教练",
          key: "coachName",
          align: "center",
          width: 150,
        },
        {
          title: "价格",
          key: "coursePrice",
          align: "center",
          width: 150,
        },
        {
          title: "添加时间",
          key: "creationDate",
          align: "center",
          width: 200,
        },
        {
          title: "上课时间",
          key: "expandTime",
          align: "center",
          width: 200,
        },
        {
          title: "操作",
          align: "center",
          width: 200,
          render: (h, params) => {
            return h("div", [
              h("Button", {
                props: {
                  type: "error",
                  size: "small",
                },
                style: {
                  marginLeft: "5px",
                },
                on: {
                  click: () => {
                    console.log(params.row)
                    this.deleteCourse(params.row.recordId);
                  },
                },
              },"删除"),
              params.row.status != 0
                ? "已使用"
                : h(
                    "Button",
                    {
                      props: {
                        type: "error",
                        size: "small",
                      },
                      style: {
                        marginLeft: "5px",
                      },
                      on: {
                        click: () => {
                          this.expendCourse(params.row.recordId);
                        },
                      },
                    },
                    "消耗"
                  ),
              params.row.status != 0
                ? ""
                : h(
                    "Button",
                    {
                      style: {
                        marginLeft: "5px",
                      },
                      on: {
                        click: () => {
                          this.updateCoachId = 0;
                          this.updateTitle = params.row.courseName + "--转教练";
                          this.updateCoachModal = true;
                          this.updateRecordId = params.row.recordId;
                        },
                      },
                    },
                    "转教练"
                  ),
            ]);
          },
        },
      ],
      updateRecordId: 0,
      updateCoachId: 0,
      updateTitle: "",
      updateCoachModal: false,
    };
  },
  computed: {
    courseTypeList() {
      return this.$store.getters.courseTypeList;
    },
    coachList() {
      return this.$store.getters.coachList;
    },
  },
  mounted() {
    this.getAllCourseByVipId();
  },
  methods: {
    addItem() {
      this.addCourseList.push({
        courseId: 0,
        courseName: "",
        coursePrice: 0,
        coachName: "",
        coachId: "",
        courseNum: 0,
        courseSum: 0,
      });
    },
    deletePlanItem(index) {
      this.addCourseList.splice(index, 1);
    },
    selectCourse(e, item) {
      console.log(e);
      item.coursePrice = e;
    },
    courseTypeChange(e, item) {
      this.courseTypeList.forEach((ele) => {
        if (ele.courseId === e) {
          item.courseName = ele.courseName;
        }
      });
    },
    jisuan(e, item) {
      console.log(e);
      console.log(item);
      item.courseSum = item.coursePrice * item.courseNum;
    },
    addVipCourse() {
      this.$Modal.confirm({
        title: "提示",
        content: "确认为该会员添加课程",
        onOk: () => {
          axios
            .post("/api/gym/vip/addVipCourse", {
              courseList: this.addCourseList,
              vipId: this.vipId,
            })
            .then((res) => {
              if (res.data.status === 200) {
                this.getAllCourseByVipId();
              }
            });
        },
      });
    },
    getAllCourseByVipId() {
      axios
        .get(
          "/api/gym/vip/getAllCourseByVipId?vipId=" +
            this.vipId +
            "&&courseId=" +
            this.courseId +
            "&&coachId=" +
            this.coachId
        )
        .then((res) => {
          this.vipCourseData = res.data.data;
        });
    },
    expendCourse(recordId) {
      axios
        .post("/api/gym/vip/expendCourse?recordId=" + recordId)
        .then((res) => {
          this.getAllCourseByVipId();
        });
    },
    changeCoach() {
      console.log(this.updateCoachId);
      if (this.updateCoachId != 0) {
        this.$Modal.confirm({
          title: "提醒",
          content: "是否转教练",
          onOk: () => {
            axios
              .post("/api/gym/vip/updateCourseCoach", {
                recordId: this.updateRecordId,
                coachId: this.updateCoachId,
              })
              .then((res) => {
                if (res.data.status == 200) {
                  this.updateCoachModal = false;
                  this.updateCoachId = 0;
                  this.updateRecordId = 0;
                  this.getAllCourseByVipId();
                }
              });
          },
        });
      } else {
        this.$Message.error("请选择教练");
      }
    },
    cloaseUpdateModal() {
      this.updateCoachModal = false;
    },
    coachChange(e) {
      this.updateCoachId = e;
    },
    deleteCourse(id){
      axios.post("/api/gym/vip/deleteVipCourse",{
        recordId:id
      })
      .then(res => {
        if(res.data.status == 200){
          this.getAllCourseByVipId();
        }
      })
    }
  },
};
</script>

<style>
.filter {
  display: flex;
  flex-wrap: wrap;
}
.filter-item {
  margin-left: 20px;
  margin-top: 10px;
  display: inline;
}
.add-btn {
  margin-left: 20px;
}
.add-region {
  margin-bottom: 10px;
}
.one-list {
  margin-top: 5px;
}
</style>